HTMLify

* {
    box-sizing: border-box;
}

:root {
    --background-color: #151515;
    --on-color: #ffc107;
    --off-color: #666;
    background-color: var(--background-color);
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0 4px;
    height: 40px;
}

.rating-button {
    appearance: none;
    background: none;
    outline: none;
    border: none;
    padding: 0;
    height: 100%;
    cursor: pointer;
    --transition-delay: 0s;
}

.rating--animatable .rating-button {
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) transform;
}

.rating-button:active {
    transform: scale(0.8);
}

.rating-button--active:active {
    transform: scale(1.1);
}

.star {
    transform: scale(0.5) rotate(0deg);
    height: 100%;
    color: var(--off-color);
}

.rating--animatable .star {
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) all;
    transition-delay: var(--transition-delay);
}

.rating-button--active .star {
    transform: scale(0.9) rotate(360deg);
    color: var(--on-color);
}